<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>table</h1>
    <hr>
    
    <table width="800" id="tab" cellspacing="0" cellpadding="5" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班期</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>艳艳</td>
            <td>0</td>
            <td>18</td>
            <td>s73</td>
            <td>
                <button onclick="delData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>静静</td>
            <td>0</td>
            <td>18</td>
            <td>s72</td>
            <td>
                <button onclick="delData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙沙</td>
            <td>0</td>
            <td>16</td>
            <td>s73</td>
            <td>
                <button onclick="delData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>波波</td>
            <td>2</td>
            <td>80</td>
            <td>s99</td>
            <td>
                <button onclick="delData(this)">删除</button>
            </td>
        </tr>
    </table>

    <br>
    <br>
    <br>
    <hr>
    <form action="1.php" method="post" name="myform" onsubmit="return addData()">
        姓名: <input type="text" name="name"><br>
        年龄: <input type="text" name="age"><br>
        班期: <input type="text" name="grade"><br>
        <button>添加</button>
    </form>
    

    <script>
        function addData() {
            var table = document.getElementById('tab');
            // 表单数据
            var name = document.myform.name.value;
            var age = document.myform.age.value;
            var grade = document.myform.grade;

            // 获取当前表格行的长度
            var index = table.rows.length;
            var tr = table.insertRow(index);

            // 给tr添加td
            tr.insertCell(0).innerHTML = index;
            tr.insertCell(1).innerHTML = name;
            tr.insertCell(2).innerHTML = '';
            tr.insertCell(3).innerHTML = age;
            tr.insertCell(4).innerHTML = grade;
            tr.insertCell(5).innerHTML = '';

            return false;
        }

        function delData(obj) {
            // console.log(obj);
            var table = document.getElementById('tab');
            console.log(obj.parentNode.parentNode.rowIndex);
            table.deleteRow(obj.parentNode.parentNode.rowIndex);
        }


    </script>
</body>
</html>